<template>
  <div class="box4">
  <el-table :data="list" stripe style="width: 100%" v-loading="loading">
    <el-table-column prop="proid" label="商品编号" width="180" />
    <el-table-column  label="商品图片" width="180" >
            <template #default="scope">
                <img class="img" :src="scope.row.img2" />
            </template>
    </el-table-column>
    <el-table-column prop="proname" label="商品名称" width="180" />
    <el-table-column prop="brand" label="商品品牌" width="180" />
    <el-table-column prop="originprice" label="商品价格" width="180" />
    <el-table-column prop="discount" label="商品折扣" width="180" />
    <el-table-column prop="sales" label="商品销量" width="180" />
    <el-table-column prop="stock" label="商品库存" />
  </el-table>
  <div class="dv">
    <el-pagination
    small
    background
    layout="prev, pager, next"
    :total="total"
    class="mt-4"
    :page-size="params.limitNum"
    @current-change="changePage"
  />
</div>
</div>
</template>

<script setup lang="ts">

import service from "../../../untils/service";
import { reactive,ref } from "vue";

// 定义分类数据类型
let loading = ref(true)

interface IGoods {
    brand: string,
    category: string,
    desc: string,
    discount: number,
    img2: string,
    isrecommend: number,
    issale: number,
    isseckill: number,
    originprice: number,
    proid: string,
    proname: string,
    sales: number,
    stock: number
}

const query = reactive<{
  category?: string;
  search?: string;
}>({
  category: "",
  search: "",
});
 
const list = reactive<IGoods[]>([])

const params = reactive<{
    count:number,
    limitNum:number
}>({
    count:1,
    limitNum:12
})


// 获取筛选商品列表

const total = ref(0);


const searchFn = () => {
    service({
        url: "/pro/list",
        params
    })
        .then(res => {
            if (res.data.code === "200") {
                total.value = res.data.total;
                list.length = 0;
                list.push(...res.data.data);
                loading.value = false
            }
        })
}

 searchFn(); 

const changePage=(value:number)=>{
    params.count = value;
    searchFn();
}
</script>

<style scoped>

.img {
    width: 100px;
    height: 100px;
}
.dv {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(223, 212, 228, 0.1);
}
</style>